<template>
	<view class="cardStyle" :style="{'background-color': bgColor}">

		<!-- image and title -->
		<view style="display:flex;" class="titlebox">
			<!-- mode3 -->
			<view>
				<image :src="showImage" v-if="mode==2" class="newsImg"></image>
			</view>
			<text v-if="mode==3" style="color: #aaa;">{{title}}</text>
			<text v-else>{{title}}</text>
		</view>
		<!-- ad -->
		<view class="adbox" v-if="mode==3">
			<view v-for="(item,index) in images">
				<image :src="item" mode="aspectFill"></image>
			</view>
		</view>
		<!-- comment and text -->
		<view class="tipsbox" :style="authorColor">
			<view style="display: flex;align-items: center;">
				<view class="commentContainer">
					<text style="color: red;font-weight: bold;" v-if="isTop">置顶</text>
					<text style="color: darkblue;font-weight: bold;" v-if="mode==3">广告</text>
					<text>{{author}}</text>
					<text v-if="mode!=3">{{comments}}评</text>
				</view>
				<!-- slot -->
				<view class="slot-container">
					<slot name="tips"></slot>
				</view>
			</view>
			<!-- timeText -->
			<view class="time-container" style="display: flex; align-items: center;">
				<text class="smallTime">{{time}}</text>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		name: "cardViewText",

		data() {
			return {
				defaultPic: '/static/news/placeHolder.png',
				status: 'news'

			};
		},
		computed: {
			showImage() {

				return this.images[0] || this.defaultPic
			},
			authorColor() {
				const colorMap = {
					news: '#aaa',
					ad: '#aaa',
					// '#00f'
				}
				// const bgMap = {
				//   news: '#eee',
				//   ad: '#ccf'
				// }
				return {
					color: colorMap[this.status] || '#f33',
					// 'background-color': bgMap[this.status]
				}
			}
		},
		mounted() {
			console.log("NewCardView--------mounted " + this.title);
			if (this.mode == 3) {
				this.status = "ad"
			}
		},

		methods: {

		},
		props: {
			bgColor: {
				type: String,
				default: '#fff'
			},
			title: {
				type: String,
				default: "新闻标题",
				required: true
			},
			isTop: {
				type: Boolean,
				default: false,
				required: true
			},
			author: {
				type: String,
				default: "来源",
				required: true
			},
			comments: {
				type: Number,
				default: 0,
				required: true
			},
			time: {
				type: String,
				default: "2025.1.1",

			},
			images: { // 对应父组件的image-url
				type: Array,
				default: () => [] // 默认空字符串，避免undefined
			},
			mode: {
				type: Number,
				default: 1,
				required: true
			}
		}
	}
</script>

<style>
	.cardStyle {
		background-color: red;
		padding: 8px 10px;
		border-bottom: 0.5px solid lightgrey;
	}



	.titlebox {
		font-size: 32rpx;
		font-weight: 400;
	}

	.tipsbox {
		margin-top: 5rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.slot-container {
		display: flex;
		align-items: center;
	}

	.newsImg {
		width: 205rpx;
		height: 165rpx;
		border-radius: 5rpx;
		padding-right: 10rpx;
	}


	.commentContainer {
		display: flex;
		align-items: center;
		font-size: 0.8rem;

	}

	.commentContainer text {
		margin-right: 10rpx;

	}


	.time-container {
		display: flex;
		align-items: center;
		font-size: 0.7rem;

	}

	.adbox {

		margin-top: 5rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		
	}

	.adbox image {
		margin: 15rpx;
		width: 205rpx;
		height: 165rpx;
	}
</style>